<template>
	<view class="content">
		<!--f1:轮播广告-->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200">
			<swiper-item v-for="item in carousels" :key="item.cid">
				<view class="swiper-item"><image :src="base + item.pic" mode="widthFix" @click="jump(item.href)"></image></view>
			</swiper-item>
		</swiper>
		<!--f2:功能菜单 宫格-->
		<uni-grid class="func-menu" :column="4" :showBorder="false" :square="true">
			<uni-grid-item v-for="(item, i) in menuItems" :key="i">
				<view class="menu-item" @click="jump(item.href)">
					<image :src="base + item.pic" mode="widthFix"></image>
					<text>{{ item.title }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- f3:商业服务 -->
		<uni-card class="card" title="| 商业服务" is-full>
			<view class="service">
				<!--左侧：房屋租售-->
				<view class="service-item">
					<view class="txt">
						<text><h3>房屋租售</h3></text>
						<view>
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<!--mode="scaleToFill" 不保持原始宽高比，缩放图片填满指定宽高-->
					<image class="img" src="../../static/img/chuzu.png" mode="scaleToFill"></image>
				</view>
				<!--右侧：便民服务-->
				<view class="service-item">
					<view class="txt">
						<text><h3>便民服务</h3></text>
						<view>
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<image class="img" src="../../static/img/bianmin.png" mode="scaleToFill"></image>
				</view>
			</view>
		</uni-card>
		<!-- f4:社区活动功能实现  -->

		<uni-card class="card" title="| 社区活动" is-full padding="0">
			<uni-list>
				<uni-list-item class="activity-item" v-for="item in activities" :key="item.aid">
					<template v-slot:body>
						<view class="activity-body">
							<text class="title">{{ item.title }}</text>
							<text class="content">{{ item.content }}</text>
							<text class="time">{{ item.startTime | dateToStr }}</text>
						</view>
					</template>
					<template v-slot:footer>
						<image class="pic" :src="base + item.pic" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
import { indexData, base } from '../../service/index.js';
export default {
	data() {
		return {
			base,
			carousels: [],
			menuItems: [],
			activities: []
		};
	},
	async onLoad() {
		//生命周期函数，在页面加载后自动触发，一个页面创建后只执行一次
		uni.showToast({
			title: '欢迎回来!',
			icon: 'none',
			duration: 2000
		});
		let data = await indexData();
		this.carousels = data.carousels;
		this.menuItems = data.menuItems;
		this.activities = data.activities;
	},
	methods: {
		jump(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style scoped lang="scss">
.swiper {
	height: 300rpx;

	.swiper-item > image {
		width: 750rpx;
	}
}

.func-menu {
	background-color: $uni-bg-color;
	margin-top: $uni-spacing-col-lg;

	.menu-item {
		//指定高度
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		> image {
			width: 35%;
			margin-bottom: $uni-spacing-col-sm;
		}
	}
}

.service {
	width: 100%;

	.service-item {
		justify-content: space-between;
		align-items: center;
		//弹性子元素尺寸增长权重：1
		flex: 1;
		padding: $uni-spacing-col-sm $uni-spacing-row-sm;

		.img {
			width: 150rpx;
			height: 120rpx;
		}

		.txt {
			font-size: $uni-font-size-sm;
			flex-direction: column;
			flex: 1;

			navigator {
				margin-right: $uni-spacing-row-sm;
			}
		}
	}
}
.activity-item {
	align-items: center;
	.activity-body {
		flex-direction: column;
		width: 420rpx;
		.title {
			font-size: $uni-font-size-base;
			color: #000;
			@include ellipsis-1;
		}
		.content {
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			@include ellipsis-1;
		}
		.time {
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
		}
	}
	.pic {
		width: 240rpx;
		flex-shrink: 0; //弹性子元素尺寸收缩权重： 0 —— 参与尺寸缩小
	}
}
</style>
